<script setup lang="ts">
import Hometitle from '@/components/Home/title.vue'
import ZHometitle from '@/components/Home/ztitle.vue'
import * as echarts from 'echarts';
import chinaJson from '@/assets/json/china.json'
import { onMounted, reactive, ref } from 'vue';
import { get_MapData } from '@/request';
echarts.registerMap('china', chinaJson);
const chinaMapBox = ref()
let mapArr = [
    {
        'adcode': '100000',
        'mapName': '中国'
    }
]
const renderMap = (adcode, mapName) => {
    get_MapData(adcode).then(resp => {
        const mycharts = echarts.init(chinaMapBox.value)
        let geoJSON = resp.data
        echarts.registerMap(mapName, geoJSON)
        const option = {
            series: [
                {
                    name: mapName,
                    type: 'map',
                    map: mapName,
                    data: geoJSON.features.map(item => {
                        return {
                            name: item.properties.name,
                            value: 0,
                            adcode: item.properties.adcode
                        }
                    }),
                    itemStyle: {
                        normal: {
                            areaColor: '#00b9ff',
                            borderColor: '#000'
                        },
                    },
                }
            ]
        }
        // 渲染地图
        mycharts.setOption(option)
        const onclick = (e) => {
            mycharts.off('click', onclick)
            mycharts.off('contextmenu', goBack)
            let { adcode, name } = e.data
            renderMap(adcode, name)
            mapArr.push({
                adcode,
                mapName: name
            })
        }

        mycharts.on('click', onclick)
    //  返回 
        const goBack = (e) => {
            e.event.stop()
            mapArr.pop()
            if (!mapArr.length) return false
            let { adcode, mapName } = mapArr[mapArr.length - 1]
            renderMap(adcode, mapName)
        }
        mycharts.on('contextmenu', goBack)
         window.addEventListener('resize', () => {
        mycharts.resize();
    });
    })
}
onMounted(() => {
    renderMap(mapArr[0].adcode, mapArr[0].mapName)
})



function randomNum(min, max) {
    return Math.floor(Math.random() * (min - max) + max);
}
function roundDown(num) {
    const n = Math.floor(Math.log10(Number(num)));
    return Math.floor(num / Math.pow(10, n)) * Math.pow(10, n);
}
let pieData = [
    {
        value: randomNum(0, 13),
        name: '北京',
    },
    {
        value: randomNum(0, 13),
        name: '上海',
    },
    {
        value: randomNum(0, 13),
        name: '浙江',
    },
    {
        value: randomNum(0, 13),
        name: '广东',
    },
    {
        value: randomNum(0, 13),
        name: '江苏',
    },
    {
        value: randomNum(0, 13),
        name: '重庆',
    },
    {
        value: randomNum(0, 13),
        name: '天津',
    }
].sort((a, b) => b.value - a.value);
let xAxisData = pieData.map(item => item.name)
let seriesData = pieData.map(item => item.value)
let maxSeriesData = new Array(pieData.length).fill(roundDown(pieData[0].value) * 2);
let barLinearColors = [

    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
        { offset: 0, color: "#2EC7CF" },
        { offset: 1, color: "#395CFE" }
    ]),
    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
        { offset: 0, color: "#395CFE" },
        { offset: 1, color: "#2EC7CF" }
    ]),
    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
        { offset: 0, color: "#2EC7CF" },
        { offset: 1, color: "#395CFE" }
    ]),
    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
        { offset: 0, color: "#395CFE" },
        { offset: 1, color: "#2EC7CF" }
    ])
]
function rankBarColor(cData) {
    let tempData = []
    cData.forEach((item, index) => {
        tempData.push({
            value: item
        })
    })
    return tempData
}
let flowoption = {
      legend: {
    textStyle: {
      color: '#fff'
    }
  },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: function (params) {
            return params && params[0].marker + params[0].name + ': ' + params[0].value;
        }
    },
    grid: { left: '18%', top: '5%', bottom: '5%', right: '5%', }, // containLabel: true
    xAxis: {
        type: "value",
        splitLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        axisLine: { show: false }
    },
    yAxis: [
        {
            type: "category",
            inverse: true,
            axisLine: { show: false },
            axisTick: { show: false },
            data: xAxisData,
            axisLabel: {
                rich: {
                    nt1: {
                        color: "#fff",
                        backgroundColor: '#EB3B5A',
                        width: 20,
                        height: 20,
                        fontSize: 12,
                        align: "center",
                        borderRadius: 100,
                        padding: [0, 1, 2, 1]
                    },
                    nt2: {
                        color: "#fff",
                        backgroundColor: '#FA8231',
                        width: 20,
                        height: 20,
                        fontSize: 12,
                        align: "center",
                        borderRadius: 100,
                        padding: [0, 1, 2, 1]
                    },
                    nt3: {
                        color: "#fff",
                        backgroundColor: '#F7B731',
                        width: 20,
                        height: 20,
                        fontSize: 12,
                        align: "center",
                        borderRadius: 100,
                        padding: [0, 1, 2, 1]
                    },
                    nt: {
                        color: "#fff",
                        backgroundColor: '#00a9c8',
                        width: 20,
                        height: 20,
                        fontSize: 12,
                        align: "center",
                        borderRadius: 100,
                        padding: [0, 1, 2, 1]
                    }
                },
                formatter: function (value) {
                    let idx = xAxisData.indexOf(value) + 1
                    if (idx <= 3) {
                        return ["{nt" + idx + "|" + idx + "}"].join("\n");
                    } else {
                        return ["{nt|" + idx + "}"].join("\n");
                    }
                }
            }
        },
        {//名称
            type: 'category',
            offset: -10,
            inverse: true,
            position: "left",
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
                color: '#fff',
                align: "left",
                verticalAlign: "bottom",
                lineHeight: 32,
                fontSize: 12
            },
            data: xAxisData
        },
    ],
    series: [
        {
            zlevel: 1,
            type: "bar",
            barWidth: 7,
            data: rankBarColor(seriesData),
            itemStyle: {
                normal: {
                    barBorderRadius: 4,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#00A2FF' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#00CCD2' // 100% 处的颜色
                    }], false),
                },

            },
        },
        {
            type: "bar",
            barWidth: 7,
            barGap: "-100%",
            itemStyle: {
                normal: {
                    barBorderRadius: 4,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#00A2FF' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#00CCD2' // 100% 处的颜色
                    }], false),
                },
            },
            // data: pieData.map(item => roundDown(item.value) * 2),
            data:[]
        }
    ],
    // dataZoom: [{
    //     type: 'slider',
    //     backgroundColor: 'rgba(245,245,245)',
    //     // backgroundColor: 'transparent',
    //     brushSelect: false,
    //     width: 7,
    //     show: false, //flase直接隐藏图形
    //     yAxisIndex: [0, 1],
    //     //left: 'center', //滚动条靠左侧的百分比
    //     //bottom: 13,
    //     startValue: 0, //滚动条的起始位置
    //     endValue: 4, //滚动条的截止位置（按比例分割你的柱状图x轴长度）

    //     handleStyle: {
    //         color: '#fff',
    //         borderColor: '#E8E8E8',
    //     },
    //     fillerColor: '#E8E8E8',
    //     borderColor: 'transparent',
    //     showDetail: false,

    //     dataBackground: {
    //         areaStyle: {
    //             opacity: 0
    //         },
    //         lineStyle: {
    //             color: 'transparent'
    //         },
    //     },

    // }],
};

const studentFlow = ref()
onMounted(() => {
    get_studentFlow().then(resp => {
        console.log('毕业生流向城市', resp)
        var myChart = echarts.init(studentFlow.value);
        flowoption.xAxis.data = resp.map((city) => city.name) // 假设每个城市对象有 name 属性
        flowoption.series[0].data = resp.map((city) => city.value)
        console.log(flowoption)
        myChart.setOption(flowoption)
        window.addEventListener('resize', function () {
            myChart.resize()
        })

    })

    function get_studentFlow() {
        return new Promise((resolve) => {
            // 模拟异步获取数据
            setTimeout(() => {
                resolve([
                    { name: '北京', value: 4 },
                    { name: '上海', value: 8 },
                    { name: '浙江', value: 1 },
                    { name: '广东', value: 1 },
                    { name: '江苏', value: 14 },
                    { name: '重庆', value: 13 },
                    { name: '天津', value: 3 }
                ])
            }, 1000)
        })
    }
})
</script>

<template>
    <div class="container">
        <div class="top"></div>
        <div class="left">
            <div class="leftTop">
                <Hometitle title="近三年来毕业人员去向"></Hometitle>
                <div class="cont">
                    <div class="people">
                        <div class="people1">
                            <p>6000</p>
                            <p>人</p>
                            <img src="../../assets/images/ren1.png" alt="">
                            <p style="color: aliceblue;">2022</p>
                        </div>
                        <div class="people2">
                            <p>6980</p>
                            <p>人</p>
                            <img src="../../assets/images/ren2.png" alt="">
                            <p style="color: aliceblue;">2023</p>
                        </div>
                        <div class="people3">
                            <p>2345</p>
                            <p>人</p>
                            <img src="../../assets/images/ren3.png" alt="">
                            <p style="color: aliceblue;">2024</p>
                        </div>

                    </div>
                    <EmployOne></EmployOne>
                </div>

            </div>
            <div class="leftBottom">
                <Hometitle title="毕业生工作状态"></Hometitle>
                <div id="student">
                    <EmployTwo></EmployTwo>
                </div>
            </div>
        </div>
        <div class="center">
            <div class="map">
                <div class="china" ref="chinaMapBox"></div>
            </div>
            <div style="margin: 30px 0 0 10px; height: 200px;">
                <TableMap style="width: 100%;height: 100%;"></TableMap>
            </div>

            <div class="footer">
                <footernav></footernav>
            </div>

        </div>
        <div class="right">
            <div class="rightTop">
                <ZHometitle title="毕业生流向城市"></ZHometitle>
                <div class="studentWork">
                    <div id="top">
                        <div class="t1">
                            <p><i class="i1"></i></p>
                            <p>设计</p>
                        </div>
                        <div class="t2">
                            <p><i class="i2"></i></p>
                            <p>开发</p>
                        </div>
                        <div class="t2">
                            <p><i class="i3"></i></p>
                            <p>元宇宙</p>
                        </div>
                    </div>
                    <div id="studentFlow" ref="studentFlow">

                    </div>
                </div>
            </div>
            <div class="rightBottom">
                <ZHometitle title="毕业生薪资分布"></ZHometitle>
                <div class="schoolflow">
                    <EmployThree></EmployThree>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container {
    position: relative;
    background-image: url('../../assets/images/pageBg.png');
    display: flex;

    .top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background-image: url('../../assets/images/Top.png');
        background-size: 100% 80px;
        background-repeat: no-repeat;

    }

    .left {
        width: 32%;
        height: 100vh;
        background-image: url('../../assets/images/Left.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .leftTop {
            margin: 50px 80px 0px 70px;
            height: 50vh;

            .cont {
                width: 100%;
                height: 45vh;
                border: #4712f5 solid 1px;
                line-height: 2vh;
                text-align: center;

                .people {
                    width: 100%;
                    height: 12vh;
                    border: #4712f5 solid 1px;
                    line-height: 2vh;
                    text-align: center;
                    display: flex;

                    .people1 {
                        width: 33%;
                        height: 12vh;
                        flex-direction: column;

                        p {
                            color: #7112e3;
                        }

                        b {
                            color: #fff;
                        }
                    }

                    .people2 {
                        width: 33%;
                        height: 12vh;
                        flex-direction: column;

                        p {
                            color: #3589d8;
                        }

                        b {
                            color: #fff;
                        }
                    }

                    .people3 {
                        width: 33%;
                        height: 12vh;
                        flex-direction: column;

                        p {
                            color: #c4e312;
                        }

                        b {
                            color: #fff;
                        }
                    }
                }

            }




        }

        .leftBottom {
            margin: 20px 80px 0px 70px;
            height: 42vh;

            #student {
                width: 100%;
                height: 36vh;
                border: #4712f5 solid 1px;
            }
        }
    }

    .center {
        width: 36%;
        height: 100vh;
        position: relative;

        .footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 65px;
        }

        .map {
            width: 100%;
            height: 500px;
            // border: 1px solid #f00;
            margin-top: 80px;

            .china {
                width: 100%;
                height: 100%;
            }
        }
    }

    .right {
        width: 32%;
        height: 100vh;
        background-image: url('../../assets/images/Right.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .rightTop {
            margin: 60px 80px 0px 70px;
            height: 42vh;
            padding: 15px;

            .studentWork {
                width: 95%;
                height: 36vh;
                border: #7161e9 solid 1px;
                padding: 15px;

                #top {
                    width: 100%;
                    height: 7vh;
                    // border: #fcc solid 1px;
                    display: flex;

                    .t1 {
                        width: 30%;
                        height: 6vh;
                        background-color: #AD00FF;
                        text-align: center;
                        margin-left: 10px;
                        display: flex;
                        line-height: 6vh;
                        justify-content: space-around;

                        .i1 {
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            background-image: url('../../assets/images/sheji.png');
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            margin-top: 10px;
                        }
                    }

                    .t2 {
                        width: 30%;
                        height: 6vh;
                        background-color: #6E37DB;
                        margin-left: 10px;
                        text-align: center;
                        display: flex;
                        justify-content: space-around;
                        line-height: 6vh;

                        .i2 {
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            background-image: url('../../assets/images/kaifa.png');
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            margin-top: 10px;
                        }

                        .i3 {
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            background-image: url('../../assets/images/yuanyu.png');
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            margin-top: 10px;
                        }
                    }

                    p {
                        color: #fff;
                    }
                }

                #studentFlow {
                    width: 100%;
                    height: 30vh;
                    // border: #fcc solid 1px;
                }


            }
        }

        .rightBottom {
            margin: 20px 80px 0px 70px;
            height: 40vh;

            .schoolflow {
                width: 95%;
                height: 36vh;
                border: #7161e9 solid 1px;
                padding: 15px;

            }
        }
    }
}
</style>
